<template>
  <div>
    <el-container style="margin-top: 10px;">
      <el-header>
        <el-form :inline="true">
          <el-form-item>
            <el-select v-model="keyword" placeholder="请选择" size="mini">
              <el-option value="降序">降序</el-option>
              <el-option value="升序">升序</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="输入图片名称" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="mini">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item>
            <el-button type="success" size="mini" @click="imageBox = true">创建相册</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" size="mini">上传图片</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu default-active="1" class="el-menu-vertical-demo">
            <el-menu-item
              class="menuMsg"
              :index="index.toString()"
              @click="changeLeft(item.id)"
              v-for="(item,index) in classList"
              :key="index"
            >
              <div>
                <span slot="title">{{item.name}}</span>
              </div>
              <el-dropdown>
                <span class="el-dropdown-link">
                  {{item.images_count}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>修改</el-dropdown-item>
                  <el-dropdown-item @click="removeImageCate(item.id)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <el-row class="rowBox" :gutter="20">
              <el-col :span="4" v-for="(item,index) in imageList" :key="index">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="item.url" class="image" />
                  <div style="padding: 14px;">
                    <div class="bottom clearfix">
                      <el-button-group>
                        <el-button class="btnGroup" size="mini" icon="el-icon-view"></el-button>
                        <el-button class="btnGroup" size="mini" icon="el-icon-edit"></el-button>
                        <el-button class="btnGroup" size="mini" icon="el-icon-delete"></el-button>
                      </el-button-group>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
          <el-footer>
            <!-- 分页器区域 -->
            <el-pagination
              @size-change="changeSize"
              @current-change="changePage"
              :current-page="page"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totals"
            ></el-pagination>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!-- 创建相册的弹框 -->
    <el-dialog title="创建相册" :visible.sync="imageBox">
      <el-form :model="photo">
        <el-form-item label="相册名称" :label-width="`80px`">
          <el-input v-model="photo.name" placeholder="请输入相册名称"></el-input>
        </el-form-item>
        <el-form-item label="相册排序" :label-width="`80px`">
          <el-input-number v-model="photo.order" :min="1" :max="10" label="描述文字"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="imageBox = false">取 消</el-button>
        <el-button type="primary" @click="addImageCate">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 图片上传的逻辑 -->
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

    <el-dialog title="上传图片" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: [],
  components: {},
  data() {
    return {
      keyword: "",
      page: 1,
      limit: 10,
      cid: "",
      sort: "",
      totals: 0,
      classList: [],
      imageList: [],
      photo: {
        name: "",
        order: ""
      },
      imageBox: false // 控制创建相册的弹框
    };
  },
  created() {},
  mounted() {
    this.getImageClass();
  },
  methods: {
    // 获取图片分类的数据
    getImageClass() {
      this.$axios.get(`/api/admin/imageclass/${this.page}`).then(res => {
        console.log(res);
        this.classList = res.data.list;
        this.totals = res.data.totalCount;
        this.cid = res.data.list[0].id;
        this.getImageList();
      });
    },
    // 获取图片列表的数据
    getImageList() {
      this.$axios
        .get(
          `/api/admin/imageclass/${this.cid}/image/${this.page}?limit=${this.limit}&order=${this.sort}&keyword=${this.keyword}`
        )
        .then(res => {
          console.log(res);
          this.imageList = res.data.list;
        })
        .catch(error => {
          console.log(error.response);
        });
    },
    // 创建图片分类的操作
    addImageCate() {
      this.$axios
        .post("/api/admin/imageclass", this.photo)
        .then(res => {
          console.log(res);
          // 成功提示
          this.$message.success("创建成功");
          this.getImageClass();
          this.imageBox = false;
        })
        .catch(error => {
          this.$message.error(error.response.data.msg);
        });
    },
    // 删除图片分类的操作
    removeImageCate(id) {
      console.log(id);
      // this.$axios.delete(`/admin/imageclass/${id}`).then(res =>{
      // 	console.log(res);
      // })
    },
    // 点击左侧菜单栏进行切换图片
    changeLeft(id) {
      console.log(id);
      this.cid = id;
      this.page = 1;
      this.getImageList();
    },
    // 分页的操作
    changeSize(size) {
      this.limit = size;
      this.getImageList();
    },
    changePage(page) {
      this.page = page;
      this.getImageList();
    },
    // 删除图片
    remove() {}
  },
  computed: {},
  watch: {}
};
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;

  .el-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0f0f0;
    padding-top: 20px;
  }
  .el-aside {
    min-height: 500px;
    border: 1px solid #ddd;
    .el-menu {
      border-right: none;

      .menuMsg {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .el-main {
    width: 100%;
    .btnGroup {
      padding: 7px 10px !important;
    }
    img {
      width: 100%;
      height: 150px;
    }
    .bottom {
      display: flex;
      justify-content: center;
    }
  }
  .el-footer {
    width: 100%;
    display: flex;
    align-items: center;
    background: #f0f0f0;
  }
}
</style>
